<template>
  <div class="trademark">
    <ul class="nav">
      <li
        class="nav-item"
        v-for="(item, index) in navList"
        :key="index"
        @click="changeIsActive(index)"
      >
        {{ item }}
        <span class="nav-bot" v-show="isActive === index"></span>
      </li>
    </ul>
    <!-- 内容区域-->
    <div class="content">
      <el-form inline>
        <el-form-item style="margin-right: 10px">
          <el-input
            size="large"
            class="trademarkSearch"
            :prefix-icon="Search"
          />
        </el-form-item>
        <el-form-item style="margin-right: 30px">
          <div class="search">搜索</div>
        </el-form-item>

        <el-form-item label="发布状态：" style="margin-right: 30px">
          <el-select placeholder="全部">
            <el-option label="全部" value="shanghai" />
            <el-option label="已发布" value="beijing" />
            <el-option label="未发布" value="beijing" />
            <el-option label="审核中" value="beijing" />
            <el-option label="审核未通过" value="beijing" />
            <el-option label="已下架" value="beijing" />
            <el-option label="仅主页可见" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <div class="block">
            <el-date-picker
              style="width: 200px"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
      </el-form>
      <div class="trademarkTable">
        <el-table
          :header-cell-style="{
            background: '#f5f7f9',
            color: '#393939',
            fontWeight: '400',
          }"
        >
          <el-table-column label="内容" width="200"></el-table-column>
          <el-table-column label="发布时间" width="200"></el-table-column>
          <el-table-column label="价格"></el-table-column>
          <el-table-column label="数据"></el-table-column>
          <el-table-column label="销售/销售额"></el-table-column>
          <el-table-column label="状态"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "",
});
</script>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const navList = ref(["全部商品", "线下课", "视频课", "直播课"]);

const isActive = ref(0);
const changeIsActive = (index: number) => {
  isActive.value = index;
};
</script>
<style lang="scss">
.trademark {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    .nav-item {
      padding: 28px 30px;
      position: relative;
      cursor: pointer;
      .nav-bot {
        width: 37px;
        height: 4px;
        background-color: #ff36b7;
        display: inline-block;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }
    }
  }
  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    padding: 30px;
    box-sizing: border-box;
    .trademarkSearch {
      border-radius: 3px;
      border: 1px solid #eaecf0;
    }
    .search {
      width: 65px;
      height: 40px;
      color: #7d8090;
      line-height: 40px;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
      background-color: #f5f7f9;
      &:hover {
        background-color: #eee;
      }
    }
    .trademarkTable {
      :deep(.el-table__cell) {
        font-weight: normal;
      }
    }
    font-weight: 500;
    .el-input__wrapper {
      margin-right: -8px;
      box-shadow: none;
      background-color: #f5f7f9;
    }
  }
}
</style>
